Lazy loading হল একটি প্রযুক্তি যা বড় ডেটা বা অ্যাপ্লিকেশনের অংশগুলিকে শুধু তখনই লোড করে, যখন সেগুলোর প্রয়োজন হয়। এটি অ্যাপ্লিকেশন বা ওয়েবপেজের প্রথম লোড সময় কমিয়ে দেয় এবং পারফরম্যান্স উন্নত করে, কারণ শুধুমাত্র ভিউ বা ডেটা যে অংশগুলো দেখানো হচ্ছে, সেগুলোই লোড করা হয়।

Angular অ্যাপ্লিকেশনে Lazy loading ব্যবহার করে আপনি কম্পোনেন্ট বা মডিউলগুলোকে আলাদা করে লোড করতে পারেন, যাতে শুধুমাত্র প্রয়োজনীয় মডিউল বা রাউটগুলি লোড হয়।

Angular এ Lazy Loading কিভাবে ব্যবহার করবেন

Angular অ্যাপ্লিকেশনে lazy loading ব্যবহার করতে আপনাকে feature modules তৈরি করতে হবে এবং Angular router দিয়ে সেই মডিউলগুলোকে আলাদা করে লোড করার কনফিগারেশন করতে হবে।

1. Feature Module তৈরি করা

প্রথমত, একটি নতুন feature module তৈরি করতে হবে, যা আপনি lazy load করতে চান।

ng generate module feature-module --route feature --module app.module

এটি feature-module নামে একটি নতুন মডিউল তৈরি করবে এবং সেই মডিউলের জন্য একটি নতুন রাউট কনফিগারেশনও তৈরি করবে।

2. Feature Module এ কম্পোনেন্ট তৈরি করা

এখন, আপনি আপনার feature module এর মধ্যে একটি কম্পোনেন্ট তৈরি করুন।

ng generate component feature-module/feature-component

এটি feature-component নামে একটি নতুন কম্পোনেন্ট তৈরি করবে যা feature-module এর মধ্যে থাকবে।

3. Router Configuration এ Lazy Loading কনফিগারেশন করা

এখন, Angular router এ lazy loading কনফিগারেশন করতে হবে। app-routing.module.ts ফাইলে যেতে হবে এবং সেখানে loadChildren অপশন ব্যবহার করতে হবে।

app-routing.module.ts ফাইলের কোড:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature', // এই রাউটটি তখনই লোড হবে যখন URL এ /feature থাকবে
    loadChildren: () => import('./feature-module/feature-module.module').then(m => m.FeatureModule)
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে loadChildren অপশন ব্যবহার করে আমরা feature module এর জন্য lazy loading কনফিগার করেছি। যখন ব্যবহারকারী /feature রাউটে যাবেন, তখন এই মডিউলটি লোড হবে।

4. Feature Module এর Routing Configuration

এখন, feature module এর নিজস্ব রাউট কনফিগারেশন করতে হবে, যাতে সেই মডিউলের কম্পোনেন্টগুলো সঠিকভাবে লোড হয়।

feature-module-routing.module.ts ফাইলের কোড:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature-component/feature-component.component';

const routes: Routes = [
  {
    path: '',
    component: FeatureComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureModuleRoutingModule { }

এখানে, feature-component কে feature module এর রুট কম্পোনেন্ট হিসেবে কনফিগার করা হয়েছে।

5. Module imports

feature-module.module.ts ফাইলে, FeatureModuleRoutingModule ইমপোর্ট করতে হবে, যাতে রাউটিং কনফিগারেশন কাজ করতে পারে।

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature-component/feature-component.component';
import { FeatureModuleRoutingModule } from './feature-module-routing.module';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    FeatureModuleRoutingModule
  ]
})
export class FeatureModule { }

এখানে, FeatureModuleRoutingModule ইমপোর্ট করা হয়েছে যাতে feature component এর রাউটিং কনফিগারেশন কাজ করতে পারে।

6. Lazy Loading এর সুবিধা

• পারফরম্যান্স বৃদ্ধি: লেজি লোডিং শুধুমাত্র প্রয়োজনীয় মডিউলগুলো লোড করার মাধ্যমে অ্যাপ্লিকেশনের প্রথম লোড সময় কমায়।
• স্কেলেবিলিটি: অ্যাপ্লিকেশনটি বড় হতে থাকলে, আপনি একে একে মডিউল লোড করে কোডের আকার কমিয়ে রাখতে পারেন।
• ভাল ইউজার এক্সপেরিয়েন্স: অ্যাপ্লিকেশনটি দ্রুত লোড হবে এবং ব্যবহারকারী সেগুলোর মধ্যে দ্রুত নেভিগেট করতে পারবেন।

সারাংশ

Angular এ Lazy Loading ব্যবহার করার মাধ্যমে আপনি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে পারবেন। এতে অ্যাপ্লিকেশনটি প্রথমে ছোট আকারে লোড হবে এবং পরে প্রয়োজনীয় মডিউলগুলো আলাদাভাবে লোড হবে। এই পদ্ধতিটি বড় অ্যাপ্লিকেশনগুলোর জন্য বিশেষভাবে কার্যকর, যেখানে একাধিক মডিউল বা কম্পোনেন্ট থাকে। Lazy loading এর মাধ্যমে অ্যাপ্লিকেশনের প্রাথমিক লোডিং টাইম কমিয়ে দেয়া যায় এবং ইউজার এক্সপেরিয়েন্স উন্নত করা যায়।